@charset "utf-8";

@import "../_fontsize.scss";

.ac-container{
    display: block;
    width: 100%;
    text-align: left;
}
.ac-container label{
//  width: 100%;
    height: r(81);
    padding-left: r(20);
    position: relative;
    z-index: 20;
    display: block;
    cursor: pointer;
    color: #333333;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
    line-height: r(81);
    font-size: r(26);
    background: #ffffff;
    background: linear-gradient(top, #ffffff 1%,#eaeaea 100%);

    box-shadow: 
        0px 0px 0px 1px rgba(155,155,155,0.3), 
        1px 0px 0px 0px rgba(255,255,255,0.9) inset, 
        0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container label:hover{
    background: #fff;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
    background: #c6e1ec;
    color: #3d7489;
    text-shadow: 0px 1px 1px rgba(255,255,255, 0.6);
    box-shadow: 
    0px 0px 0px 1px rgba(155,155,155,0.3), 
    0px 2px 2px rgba(0,0,0,0.1);
}
.ac-container input{
    display: none;
}
.ac-container article{
    width: 100%;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.5);
    margin-top: -1px;
    overflow: hidden;
    height: 0px;
    position: relative;
    z-index: 10;
    transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
         ul.one{width:30% ;margin-left: r(20);}
         ul.two{width:50% ;}
        ul li{color: #999999;
                line-height: r(60);
                font-size: r(22);}

}

.ac-container input:checked ~ article{
    transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
    box-shadow: 0px 0px 0px 1px rgba(155,155,155,0.3);
       
}
.ac-container input:checked ~ article.ac-small{
    height: r(390);
}
.ac-container input:checked ~ article.ac-medium{
    height: r(148);
}
.ac-container input:checked ~ article.ac-large{
    height: r(171);
}